<template>
  <div class="time-filter">
    <span 
      v-for="period in timePeriods" 
      :key="period.value"
      :class="{ 'active': activePeriod === period.value }"
      @click="handlePeriodChange(period.value)"
    >
      {{ period.label }}
    </span>
  </div>
</template>

<script setup>
import { ref, defineEmits, defineProps } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: 'day'
  },
  size: {
    type: String,
    default: 'default'
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

const timePeriods = [
  { label: '天', value: 'day' },
  { label: '月', value: 'month' },
  { label: '年', value: 'year' }
]

const activePeriod = ref(props.modelValue)

const handlePeriodChange = (period) => {
  activePeriod.value = period
  emit('update:modelValue', period)
  emit('change', period)
}
</script>

<style lang="scss" scoped>
.time-filter {
  display: flex;
  gap: 4px;
  background: #f8f9fa;
  padding: 4px;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  
  span {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: #6c757d;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    min-width: 40px;
    text-align: center;
    border: 1px solid transparent;
    
    &.active {
      background: linear-gradient(135deg, #16A5B7, #4fdaca);
      color: white;
      box-shadow: 0 4px 12px rgba(22, 165, 183, 0.3);
      transform: translateY(-1px);
      border-color: #16A5B7;
    }
    
    &:hover:not(.active) {
      background: white;
      color: #16A5B7;
      border-color: #e3f2fd;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    &:active {
      transform: translateY(0);
    }
  }
}
</style>
